<template>
  <!-- 我的家庭成员信息页面 -->
  <div class="family_sty">
    <el-button class="family_but" @click="familyAdd" type="primary">添加家庭成员信息</el-button>
    <el-table height="590" border class="family_sty_table" :data="fameblist">
      <el-table-column label="与本人关系" prop="role"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="职业" prop="job"></el-table-column>
      <el-table-column label="政治面貌" prop="politics"></el-table-column>
      <el-table-column label="联系电话" prop="contactWay"></el-table-column>
    </el-table>
    <family ref="famiAdd" @familyList="familyList" v-show="showfam"></family>
  </div>
</template>

<script>
import family from "./familyAdd.vue"
export default {
  components:{
    family
  },
  data(){
    return{
      fameblist:[],//家庭成员列表信息
      showfam:false,//是否显示添加家庭成员信息弹框
    }
  },
  mounted(){
    this.familyList()
  },
  methods:{
    familyList(){//获取家庭成员信息
      this.axios({
        // localStorage.getItem('token')
        headers:{'Authentication':localStorage.getItem('token')},
        method:"post",
        // url:"api/homeInfo/getUserHomeInfoList",
        url:"/homeInfo/getUserHomeInfoList",
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.fameblist = res.data.data
      })
    },
    familyAdd(){//添加家庭成员信息
      this.showfam = true
      this.$nextTick(() => {
        this.$refs.famiAdd.init()
      })
    }
  }
}
</script>

<style lang="scss">
  .family_sty{
    // margin-top: 3vh;
    .family_sty_table{
      // height: 150vh;
      .has-gutter{
        th{
          text-align: center;
        }
      }
      .el-table__row{
        td{
          text-align: center;
        }
      }
    }
    .family_but{
      margin-bottom: 3vh;
    }
  }
</style>